import React from 'react'
import { Form, Field ,Button} from 'react-vant';
import {connect} from "react-redux"
import * as action from "../action"
import { useEffect} from "react"
import {bindActionCreators} from "redux"
function Form1(props) {
    const [form] = Form.useForm(); // react-vant 里的hooks ，不是react自带的
    useEffect(()=>{  // 相当于类组件得componentdidmountd
       if (props.history.location.state.isadd == "编辑") {
             form.setFieldsValue(props.history.location.state.item)
       }
       console.log(props.history.location.state.index );
      
    },[])

    const onFinish = (values) => { // 点击提交的时候
        console.log('form submit', values);
        if (props.history.location.state.isadd == "新增") {
            props.addform(values)
           
        } else if (props.history.location.state.isadd == "编辑") {
           props.editfn(Object.assign({},values,{index:props.history.location.state.index}))
          
        }
        props.history.push({
            pathname:"/address"
        })
      
    };
    return (
        <div>
            <Form onFinish={onFinish} form={form} footer={
                <div style={{ margin: '16px 16px 0' }}>
                    <Button round nativeType="submit" type="primary" block>
                        提交
                    </Button>
                </div>
            }>
                <Form.Item name="name" label="性名">
                    <Field />
                </Form.Item>
                <Form.Item name="phone" label="电话">
                    <Field />
                </Form.Item>
                <Form.Item name="address" label="住址">
                    <Field />
                </Form.Item>
            </Form>
        </div>
    )
}
const mapStateToProps = (state)=>{
    return {
        ...state.shopReducer
    }
}
const mapDispatchToProps =  (dispatch)=>bindActionCreators(action,dispatch)
export default connect(mapStateToProps,mapDispatchToProps)(Form1)